<template>
  <div class="container">
    <el-card>
      <!-- 头部表单 新增按钮 -->
      <el-row
        type="flex"
        justify="space-between"
      >
        <el-col>
          <el-form
            inline
            size="small"
          >
            <el-form-item label="学科名称">
              <el-input v-model="paramsForm.subjectName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button
                type="primary"
                @click="search"
              >搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col>
          <el-row
            type="flex"
            justify="end"
          >
            <el-button
              type="success"
              size="small"
              icon="el-icon-edit"
              @click="dialogVisible = true"
            >新增学科</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-table :data="subjectList">
        <el-table-column
          label="序号"
          type="index"
        ></el-table-column>
        <el-table-column
          label="学科名称"
          prop="subjectName"
        ></el-table-column>
        <el-table-column
          label="创建者"
          prop="username"
        ></el-table-column>
        <el-table-column
          label="创建日期"
          prop="addDate"
        >
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          label="前台是否显示"
          prop="isFrontDisplay"
        >
          <template slot-scope="{ row }">
            <span v-if="row.twoLevelDirectory === 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
          label="二级目录"
          prop="twoLevelDirectory"
        >
        </el-table-column>
        <el-table-column
          label="标签"
          prop="tags"
        ></el-table-column>
        <el-table-column
          label="题目数量"
          prop="totals"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="240px"
        >
          <template slot-scope="{ row }">
            <el-link
              type="primary"
              @click="skipDirectorys(row)"
              :underline="false"
            >目录分类</el-link>
            <el-link
              type="primary"
              @click="skipTags(row)"
              :underline="false"
            >学科标签</el-link>
            <el-link
              type="primary"
              @click="editSubject(row.id)"
              :underline="false"
            >修改</el-link>
            <el-link
              type="primary"
              @click="delSubject(row.id)"
              :underline="false"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-row
        type="flex"
        justify="end"
      >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paramsForm.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="paramsForm.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <subject-add
      :dialog-visible.sync="dialogVisible"
      @getSubjectList="getSubjectList()"
      :subject-id="subjectId"
    />
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
import { parseTimeByString } from '@/filters'
import SubjectAdd from '../components/subjects-add.vue'
export default {
  name: 'subject',
  components: {
    SubjectAdd
  },
  data () {
    return {
      subjectList: [], // 学科列表数据
      paramsForm: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      counts: 0, // 总数
      dialogVisible: false,
      subjectId: null
    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    async getSubjectList () {
      const { data } = await list(this.paramsForm)
      console.log(data)
      this.subjectList = data.items
      this.paramsForm.page = parseInt(data.page)
      this.paramsForm.pagesize = parseInt(data.pagesize)
      this.counts = data.counts
    },
    handleSizeChange (newSize) {
      console.log(newSize)
      this.paramsForm.pagesize = newSize
      this.getSubjectList()
    },
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.paramsForm.page = newPage
      this.getSubjectList()
    },
    search () {
      this.getSubjectList()
    },
    clear () {
      this.paramsForm.subjectName = ''
      this.getSubjectList()
    },
    async delSubject (id) {
      try {
        await this.$confirm('确定删除该学科吗？')
        await remove({ id })
        this.$message.success('删除成功')
        this.getSubjectList()
      } catch (error) {
        return error
      }
    },
    editSubject (id) {
      this.subjectId = id
      this.dialogVisible = true
    },
    skipDirectorys (row) {
      // 跳转目录
      this.$router.push({
        path: 'directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    skipTags (row) {
      // 跳转标签
      this.$router.push({
        path: 'tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}
.el-table {
  margin: 15px 0;
}
.el-link {
  margin-right: 10px;
}
</style>
